import "package:flutter/material.dart";
import "../_common/global.dart";

class SwOwnPage extends StatefulWidget {
  const SwOwnPage({super.key});
  @override
  State<StatefulWidget> createState() {
    return _SwOwnPageState();
  }
}

class _SwOwnPageState extends State<SwOwnPage> {
  @override
  Widget build(BuildContext context) {
    return const UserInfoBox();
  }
}

class UserInfoBox extends StatelessWidget {
  final double _statusBarHeight = 44.0;
  const UserInfoBox({super.key});

  @override
  Widget build(BuildContext context) {
    ScreenUnit.init(context);
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("./images/2.jpg"),
              fit: BoxFit.cover,
            ),
          ),
          child: Column(
            children: [
              SizedBox(
                height: _statusBarHeight,
              ),
              Stack(
                alignment: Alignment.bottomCenter,
                children: [
                  Positioned(
                    child: Container(
                      height: 50,
                      width: double.infinity,
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                            colors: [
                              Color.fromARGB(255, 255, 255, 255),
                              Color.fromARGB(255, 255, 255, 255),
                              Color.fromARGB(255, 255, 255, 255),
                              Color.fromARGB(255, 255, 255, 255),
                              Color.fromARGB(150, 255, 255, 255),
                              Color.fromARGB(0, 255, 255, 255),
                            ]),
                      ),
                    ),
                  ),
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 20, right: 20, bottom: 10),
                    child: Column(
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(bottom: 26),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Padding(
                                padding: EdgeInsets.only(left: 20),
                                child: Icon(
                                  Icons.tv,
                                  size: 20,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(left: 20),
                                child: Icon(
                                  Icons.qr_code,
                                  size: 20,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(left: 20),
                                child: Icon(
                                  Icons.app_registration_sharp,
                                  size: 20,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(left: 20),
                                child: Icon(
                                  Icons.mode_night_outlined,
                                  size: 20,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Expanded(
                              flex: 1,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    margin: const EdgeInsets.only(right: 18),
                                    child: CircleAvatar(
                                      radius: ScreenUnit.setSp(24.0,
                                          dynamic: false),
                                      backgroundImage: const AssetImage(
                                        "./images/1.jpg",
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    flex: 1,
                                    child: Padding(
                                      padding: const EdgeInsets.only(right: 12),
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              const Flexible(
                                                fit: FlexFit.loose,
                                                child: Text(
                                                  '言言_Official',
                                                  style:
                                                      TextStyle(fontSize: 15),
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                  maxLines: 1,
                                                ),
                                              ),
                                              Row(
                                                children: [
                                                  Container(
                                                    margin:
                                                        const EdgeInsets.only(
                                                            right: 6),
                                                    child: const Icon(
                                                      Icons.edit,
                                                      size: 15,
                                                    ),
                                                  ),
                                                  Container(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            left: 6,
                                                            top: 2,
                                                            bottom: 2,
                                                            right: 4),
                                                    decoration: BoxDecoration(
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              8),
                                                      color:
                                                          const Color.fromARGB(
                                                              72, 0, 0, 0),
                                                    ),
                                                    child: const Row(
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .spaceAround,
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .center,
                                                      children: [
                                                        Padding(
                                                          padding:
                                                              EdgeInsets.only(
                                                                  right: 4),
                                                          child: Text(
                                                            'lv6',
                                                            style: TextStyle(
                                                              fontSize: 10,
                                                              color:
                                                                  Colors.white,
                                                              fontWeight:
                                                                  FontWeight
                                                                      .bold,
                                                            ),
                                                          ),
                                                        ),
                                                        Text(
                                                          '试炼',
                                                          style: TextStyle(
                                                            fontSize: 10,
                                                            color: Colors.white,
                                                          ),
                                                        ),
                                                        Icon(
                                                          Icons
                                                              .keyboard_arrow_right,
                                                          size: 12,
                                                          color: Colors.white,
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ],
                                          ),
                                          Container(
                                            margin: const EdgeInsets.only(
                                                bottom: 4, top: 4),
                                            padding: const EdgeInsets.only(
                                                left: 3, right: 3),
                                            decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(2),
                                              border: Border.all(
                                                  color: Colors.black,
                                                  width: 1),
                                            ),
                                            child: const Text(
                                              '正式会员',
                                              style: TextStyle(
                                                fontSize: 9,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),
                                          ),
                                          Row(
                                            children: [
                                              Container(
                                                margin: const EdgeInsets.only(
                                                    right: 12),
                                                child: const Row(
                                                  children: [
                                                    Padding(
                                                      padding: EdgeInsets.only(
                                                          right: 5),
                                                      child: Text(
                                                        'B币:',
                                                        style: TextStyle(
                                                          fontSize: 12,
                                                        ),
                                                      ),
                                                    ),
                                                    Text(
                                                      '0.0',
                                                      style: TextStyle(
                                                        fontSize: 12,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                              Container(
                                                margin: const EdgeInsets.only(
                                                    right: 12),
                                                child: const Row(
                                                  children: [
                                                    Padding(
                                                      padding: EdgeInsets.only(
                                                          right: 5),
                                                      child: Text(
                                                        '硬币:',
                                                        style: TextStyle(
                                                          fontSize: 12,
                                                        ),
                                                      ),
                                                    ),
                                                    Text(
                                                      '943',
                                                      style: TextStyle(
                                                        fontSize: 12,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ],
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            const Row(
                              children: [
                                Text(
                                  "空间",
                                  style: TextStyle(
                                    fontSize: 12,
                                  ),
                                ),
                                Icon(
                                  Icons.keyboard_arrow_right,
                                  size: 20,
                                ),
                              ],
                            ),
                          ],
                        ),
                        const Padding(
                          padding: EdgeInsets.only(top: 24, bottom: 22),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    '31',
                                    style: TextStyle(
                                      fontSize: 16,
                                      height: 1,
                                    ),
                                  ),
                                  Text(
                                    '动态',
                                    style: TextStyle(
                                      fontSize: 12,
                                    ),
                                  ),
                                ],
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    '514',
                                    style: TextStyle(
                                      fontSize: 16,
                                      height: 1,
                                    ),
                                  ),
                                  Text(
                                    '关注',
                                    style: TextStyle(
                                      fontSize: 12,
                                    ),
                                  ),
                                ],
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    '329',
                                    style: TextStyle(
                                      fontSize: 16,
                                      height: 1,
                                    ),
                                  ),
                                  Text(
                                    '粉丝',
                                    style: TextStyle(
                                      fontSize: 12,
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            color: const Color.fromARGB(255, 255, 239, 244),
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Expanded(
                                flex: 1,
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Container(
                                      margin: const EdgeInsets.only(right: 8),
                                      height: 28,
                                      width: 28,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(14),
                                        color: const Color.fromARGB(
                                            255, 250, 99, 159),
                                      ),
                                      child: const Center(
                                        child: Text(
                                          "大",
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 16,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                    ),
                                    const Expanded(
                                      flex: 1,
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            "您的限量优惠已激活",
                                            maxLines: 1,
                                            overflow: TextOverflow.ellipsis,
                                            style: TextStyle(
                                              fontSize: 13,
                                              color: Color.fromARGB(
                                                  255, 250, 99, 159),
                                            ),
                                          ),
                                          Row(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.center,
                                            children: [
                                              Flexible(
                                                fit: FlexFit.loose,
                                                child: Text(
                                                  "双年卡低至0.22元/天",
                                                  maxLines: 1,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                  style: TextStyle(
                                                    fontSize: 13,
                                                    color: Color.fromARGB(
                                                        255, 250, 99, 159),
                                                  ),
                                                ),
                                              ),
                                              Icon(
                                                Icons.keyboard_arrow_right,
                                                size: 18,
                                                color: Color.fromARGB(
                                                    255, 250, 99, 159),
                                              )
                                            ],
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              const Padding(
                                padding: EdgeInsets.only(left: 20),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Text(
                                      "立即开通",
                                      style: TextStyle(
                                        fontSize: 13,
                                        color:
                                            Color.fromARGB(255, 250, 99, 159),
                                      ),
                                    ),
                                    Icon(
                                      Icons.keyboard_arrow_right,
                                      size: 18,
                                      color: Color.fromARGB(255, 250, 99, 159),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        Expanded(
          flex: 1,
          // 当ListView 没有与AppBar一起使用，可以添加MediaQuery.removePadding 移除顶部内边距
          child: Container(
            decoration: const BoxDecoration(color: Colors.white),
            child: MediaQuery.removePadding(
              context: context,
              removeTop: true,
              child: ListView(
                // 需要设置无弹性效果
                children: [
                  const Padding(
                    padding: EdgeInsets.only(bottom: 4),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        MenuItem(
                          icon: Icon(
                            Icons.cloud_download_outlined,
                            color: Color(0xff4094ff),
                          ),
                          title: '离线缓存',
                        ),
                        MenuItem(
                          icon: Icon(
                            Icons.av_timer_sharp,
                            color: Color(0xff4094ff),
                          ),
                          title: '历史记录',
                        ),
                        MenuItem(
                          icon: Icon(
                            Icons.star_outline_rounded,
                            color: Color(0xff4094ff),
                          ),
                          title: '我的收藏',
                        ),
                        MenuItem(
                          icon: Icon(
                            Icons.replay,
                            color: Color(0xff4094ff),
                          ),
                          title: '稍后再看',
                        ),
                      ],
                    ),
                  ),
                  MenuWrap(
                    headerPadding: const EdgeInsets.fromLTRB(20, 14, 20, 14),
                    leading: const Text(
                      '创作中心',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                      ),
                    ),
                    trailing: Container(
                      height: 30,
                      padding: const EdgeInsets.fromLTRB(13, 0, 13, 0),
                      decoration: BoxDecoration(
                          color: const Color.fromARGB(255, 251, 114, 153),
                          borderRadius: BorderRadius.circular(15)),
                      child: const Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.upload,
                            color: Colors.white,
                          ),
                          Text(
                            '发布',
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                          )
                        ],
                      ),
                    ),
                    body: const Padding(
                      padding: EdgeInsets.only(bottom: 8),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MenuItem(
                                icon: Icon(
                                  Icons.cloud_download_outlined,
                                  color: Color.fromARGB(255, 255, 210, 64),
                                ),
                                title: '创作中心',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.av_timer_sharp,
                                  color: Color.fromARGB(255, 255, 210, 64),
                                ),
                                title: '稿件管理',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.star_outline_rounded,
                                  color: Color.fromARGB(255, 255, 210, 64),
                                ),
                                title: '创作激励',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.replay,
                                  color: Color.fromARGB(255, 255, 210, 64),
                                ),
                                title: '有奖活动',
                              ),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MenuItem(
                                icon: Icon(
                                  Icons.cloud_download_outlined,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '开播福利',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.av_timer_sharp,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '主播中心',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.star_outline_rounded,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '直播数据',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.replay,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '主播活动',
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  const Padding(
                    padding: EdgeInsets.only(left: 20, right: 20),
                    child: AlertBar(
                      leading: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.flag,
                            size: 18,
                            color: Color.fromARGB(255, 255, 210, 64),
                          ),
                          Expanded(
                            child: Padding(
                              padding: EdgeInsets.only(left: 8),
                              child: Text(
                                '使用必火推广领200元奖励',
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontSize: 13,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      trailing: Padding(
                        padding: EdgeInsets.only(left: 8),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              '立即前往',
                              style: TextStyle(
                                color: Color.fromARGB(255, 251, 114, 153),
                                fontSize: 12,
                              ),
                            ),
                            Icon(
                              Icons.keyboard_arrow_right,
                              size: 20,
                              color: Color.fromARGB(255, 251, 114, 153),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                  MenuWrap(
                    headerPadding: const EdgeInsets.fromLTRB(20, 14, 20, 14),
                    leading: const Padding(
                      padding: EdgeInsets.only(right: 10),
                      child: Text(
                        '游戏中心',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 14,
                        ),
                      ),
                    ),
                    trailingFlex: 1,
                    trailing: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          width: 20,
                          height: 20,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(2),
                            image: const DecorationImage(
                                image: AssetImage(
                                  './images/3.jpg',
                                ),
                                fit: BoxFit.cover),
                          ),
                        ),
                        const SizedBox(
                          width: 150,
                          child: Padding(
                            padding: EdgeInsets.only(right: 4, left: 4),
                            child: Text(
                              '米哈游全新都市动作冒险游戏米哈游全新都市动作冒险游戏',
                              textAlign: TextAlign.end,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                fontSize: 12,
                                color: Color.fromARGB(255, 150, 150, 150),
                              ),
                            ),
                          ),
                        ),
                        const Icon(
                          Icons.keyboard_arrow_right,
                          size: 18,
                          color: Color.fromARGB(255, 150, 150, 150),
                        )
                      ],
                    ),
                    body: const Padding(
                      padding: EdgeInsets.only(bottom: 8),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MenuItem(
                                icon: Icon(
                                  Icons.cloud_download_outlined,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '我的游戏',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.av_timer_sharp,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '我的预约',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.star_outline_rounded,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '下载管理',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.replay,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '找游戏',
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  const MenuWrap(
                    headerPadding: EdgeInsets.fromLTRB(20, 14, 20, 14),
                    leading: Text(
                      '推荐服务',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                      ),
                    ),
                    body: Padding(
                      padding: EdgeInsets.only(bottom: 8),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MenuItem(
                                icon: Icon(
                                  Icons.cloud_download_outlined,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '我的课程',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.av_timer_sharp,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '免流量服务',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.star_outline_rounded,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '个性装扮',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.replay,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '我的钱包',
                              ),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MenuItem(
                                icon: Icon(
                                  Icons.cloud_download_outlined,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '会员购中心',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.av_timer_sharp,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '我的直播',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.star_outline_rounded,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '漫画',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.replay,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '必火推广',
                              ),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              MenuItem(
                                icon: Icon(
                                  Icons.cloud_download_outlined,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '社区中心',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.av_timer_sharp,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '哔哩哔哩公益',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.star_outline_rounded,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '工房',
                              ),
                              MenuItem(
                                icon: Icon(
                                  Icons.replay,
                                  color: Color.fromARGB(255, 251, 114, 153),
                                ),
                                title: '能量加油站',
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  const MenuWrap(
                    headerPadding: EdgeInsets.fromLTRB(20, 14, 20, 14),
                    leading: Text(
                      '更多服务',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                      ),
                    ),
                    body: Padding(
                      padding: EdgeInsets.only(bottom: 8, left: 20),
                      child: Column(
                        children: [
                          ListItem(
                            leading: Padding(
                              padding: EdgeInsets.only(right: 10),
                              child: Icon(
                                Icons.replay,
                                color: Color.fromARGB(255, 251, 114, 153),
                              ),
                            ),
                            title: '联系客服',
                            trailing: Icon(Icons.keyboard_arrow_right),
                          ),
                          ListItem(
                            leading: Padding(
                              padding: EdgeInsets.only(right: 10),
                              child: Icon(
                                Icons.replay,
                                color: Color.fromARGB(255, 251, 114, 153),
                              ),
                            ),
                            title: '听视频',
                            trailing: Icon(Icons.keyboard_arrow_right),
                          ),
                          ListItem(
                            leading: Padding(
                              padding: EdgeInsets.only(right: 10),
                              child: Icon(
                                Icons.replay,
                                color: Color.fromARGB(255, 251, 114, 153),
                              ),
                            ),
                            title: '青少年守护',
                            trailing: Icon(Icons.keyboard_arrow_right),
                          ),
                          ListItem(
                            leading: Padding(
                              padding: EdgeInsets.only(right: 10),
                              child: Icon(
                                Icons.replay,
                                color: Color.fromARGB(255, 251, 114, 153),
                              ),
                            ),
                            title: '设置',
                            trailing: Icon(Icons.keyboard_arrow_right),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(height: 70),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}

class MenuItem extends StatelessWidget {
  final Icon icon;
  final String title;
  const MenuItem({
    super.key,
    required this.icon,
    required this.title,
  });
  @override
  Widget build(BuildContext context) {
    return Expanded(
        flex: 1,
        child: Padding(
          padding: const EdgeInsets.only(top: 8, bottom: 8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 4),
                child: icon,
              ),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 12,
                  color: Color(0xff333333),
                ),
              ),
            ],
          ),
        ));
  }
}

class MenuWrap extends StatelessWidget {
  final Widget? leading;
  final Widget? trailing;
  final Widget? body;
  final EdgeInsetsGeometry headerPadding;
  final int leadingFlex;
  final int trailingFlex;
  const MenuWrap({
    super.key,
    this.leading,
    this.trailing,
    this.body,
    this.headerPadding = EdgeInsets.zero,
    this.leadingFlex = 0,
    this.trailingFlex = 0,
  });
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: headerPadding,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                flex: leadingFlex,
                child: leading ?? const SizedBox(),
              ),
              Expanded(
                flex: trailingFlex,
                child: trailing ?? const SizedBox(),
              )
            ],
          ),
        ),
        body ?? const SizedBox()
      ],
    );
  }
}

class AlertBar extends StatelessWidget {
  final Widget? leading;
  final Widget? trailing;
  final int leadingFlex;
  final int trailingFlex;
  const AlertBar({
    super.key,
    this.leading,
    this.trailing,
    this.leadingFlex = 1,
    this.trailingFlex = 0,
  });
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: const Color.fromARGB(255, 241, 241, 241),
          borderRadius: BorderRadius.circular(4)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            flex: leadingFlex,
            child: leading ?? const SizedBox(),
          ),
          Expanded(
            flex: trailingFlex,
            child: trailing ?? const SizedBox(),
          ),
        ],
      ),
    );
  }
}

class ListItem extends StatelessWidget {
  final Widget? leading;
  final Widget? trailing;
  final String title;
  final int leadingFlex;
  final int trailingFlex;
  final int titleFlex;
  const ListItem({
    super.key,
    this.leading,
    this.trailing,
    required this.title,
    this.leadingFlex = 0,
    this.trailingFlex = 0,
    this.titleFlex = 1,
  });
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            flex: 1,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  flex: leadingFlex,
                  child: leading ?? const SizedBox(),
                ),
                Expanded(
                    flex: titleFlex,
                    child: Padding(
                      padding: const EdgeInsets.only(right: 12),
                      child: Text(
                        title,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(fontSize: 13),
                      ),
                    )),
              ],
            ),
          ),
          Expanded(
            flex: trailingFlex,
            child: trailing ?? const SizedBox(),
          )
        ],
      ),
    );
  }
}
